<template>
  <div class="group_box">
    <div
      v-for="(item, i) in list"
      :key="i"
      :ref="setItemRef"
      class="group_wrapper"
    >
      <div ref="groupCellRef" class="group_cell top_line bottom_line">
        {{ item.name }}
      </div>
      <GroupBox v-if="item.children" :list="item.children" />
      <div
        class="link_line"
        :style="{
          width: linkLineWidth + 'px',
          left: linkLineLeft + 'px',
        }"
      ></div>
    </div>
  </div>
</template>

<script>
import {
  ref,
  reactive,
  watch,
  computed,
  getCurrentInstance,
  onMounted,
  nextTick,
} from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";

export default {
  name: "GroupBox",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, context) {
    // ------------------ 通用属性 start --------------------
    console.log("getCurrentInstance() ==>", getCurrentInstance());
    const { proxy, parent } = getCurrentInstance();
    const $api = proxy.$api;
    const router = useRouter();
    const store = useStore();
    // ------------------ 通用属性 end ----------------------

    const demoVar = ref(false);
    const demoArr = reactive([]);

    const groupCellRef = ref(null);

    const childrenLeftList = ref([]);

    const linkLineWidth = ref(0);
    const linkLineLeft = ref(0);

    const itemRefs = [];
    const setItemRef = (el) => {
      if (el) {
        itemRefs.push(el);
      }
    };

    // 计算属性
    const userInfo = computed(() => store.state.user.userInfo);

    // 属性监听
    watch(
      () => props.demo,
      (newVal) => {
        ElMessage.success("this is a demo !");
      }
    );

    const demoMtd = () => {};

    // 组件钩子
    onMounted(() => {
      nextTick(() => {
        // const left = groupCellRef.value.offsetLeft;
        // console.log("left ==>", left);
        // if (parent.proxy.childrenLeftList) {
        //   parent.proxy.childrenLeftList.push(left);
        // }
        let lineWidth = 0;
        itemRefs.forEach((item, index) => {
          // item 即为对应的组件ref
          // 可通过 item 获取对应组件上的属性或方法
          console.log("ref ===>", item);
          console.log("ref ===> offsetWidth", item.offsetWidth);
          if (index === 0 || index === itemRefs.length - 1) {
            lineWidth += item.offsetWidth / 2;
          } else {
            lineWidth += item.offsetWidth;
          }
        });
        console.log("---------------------------");
        linkLineLeft.value = itemRefs[0].offsetWidth / 2;
        linkLineWidth.value = lineWidth;
        console.log("linkLineLeft ==>", linkLineLeft.value);
        console.log("linkLineWidth ==>", linkLineWidth.value);
        // console.log("parent ==>", parent);
        // if (parent.ctx.linkLineLeft) {
        //   console.log("1111 ==>", parent.ctx.linkLineLeft);
        //   parent.ctx.linkLineLeft = itemRefs[0].offsetWidth / 2;
        // }
        // if (parent.ctx.linkLineWidth) {
        //   console.log("222 ==>", parent.ctx.linkLineWidth);
        //   parent.ctx.linkLineWidth = lineWidth;
        // }
      });
    });

    return {
      demoVar,
      demoArr,
      userInfo,
      demoMtd,
      groupCellRef,
      childrenLeftList,
      setItemRef,
      linkLineWidth,
      linkLineLeft,
    };
  },
};
</script>

<style lang="less" scoped>
.group_box {
  text-align: center;
  position: relative;
  .group_wrapper {
    position: relative;
    padding: 0 20px;
    display: inline-block;
    white-space: nowrap;
  }

  .group_cell {
    display: inline-block;
    white-space: nowrap;
    border: 1px solid #409eff;
    padding: 10px 20px;
    border-radius: 4px;
    position: relative;
    z-index: 1;
    margin-top: 20px;
    margin-bottom: 20px;
    & + .group_cell {
      margin-left: 40px;
    }
    &.top_line::before {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: 2px;
      background: #409eff;
      height: 20px;
      transform: translate(-50%, -100%);
    }
    &.bottom_line::after {
      display: block;
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 2px;
      background: #409eff;
      height: 20px;
      transform: translate(-50%, 100%);
    }
  }

  .link_line {
    position: absolute;
    top: 81px;
    // left: 50%;
    z-index: 0;
    height: 2px;
    width: 500px;
    // transform: translateX(-50%);
    box-sizing: border-box;
    background-color: #409eff;
  }
}
</style>
